import React,{useState} from "react";
import { Form, Input, Button, Select ,InputNumber} from 'antd';
import Authority from './Authority'
import API from '../../api/api';
import './Role.css'

const { Option } = Select;

const layout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
};

export default class UpdateRoleForm extends React.Component {

    state={
        number:11,
    }

    permissions = [];

    defaultData = [];

    formRef = React.createRef();

    onGenderChange = (value) => {
        this.formRef.current.setFieldsValue({
            note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
        });
    };

    onFinish = (values) => {

        // if(values.rolePermission==undefined || values.rolePermission.length==0){
        //     alert("未授权限")
        // }else {
        //     console.log(values);
        //     API.insertRole(values)
        // }
        // values.rolePermission.push(46)
        console.log(values)
        if(values.roleName==""){
            values.roleName=" "
        }
        if(values.roleDesc==""){
            values.roleDesc=" "
        }

        if(values.roleDesc==undefined && values.roleName == undefined && values.rolePermission==undefined){
            alert("内容未修改")
            return
        }
        if(values.rolePermission!=undefined){
            let newRolePermission = values.rolePermission.filter(item=>item!=0)
            values.rolePermission = newRolePermission
        }
        if(API.updateRole(values)=='ok'){
            this.props.result("ok")
        }else this.props.result("error")
    };

    onReset = () => {
        this.formRef.current.resetFields();
    };

    getPermissions=(permissions)=>{
        this.permissions = permissions;
    }


    render() {
        this.defaultData = API.getRoleContent(sessionStorage.getItem("roleId"));
        console.log("this.defaultData",this.defaultData)
        return (
            <Form {...layout} ref={this.formRef} name="control-ref" onFinish={this.onFinish} onReset={this.onReset}>
                <Form.Item
                    name="roleName"
                    label="角色名称"
                    // rules={[
                    //     {
                    //         required: true,
                    //     },
                    // ]}
                >
                    <Input defaultValue={this.defaultData.roleName}/>
                </Form.Item>
                <Form.Item
                    name="roleType"
                    label="角色类型"
                    // rules={[
                    //     {
                    //         required: true,
                    //     },
                    // ]}
                >
                    <Select
                        // placeholder="Select a option and change input text above"
                        onChange={this.onGenderChange}
                        allowClear
                        defaultValue={this.defaultData.roleType}
                    >
                        <Option value={this.defaultData.roleType=="manager"?"manager":this.defaultData.roleType=="user"?"user":null}>
                            {
                                this.defaultData.roleType=="manager"?
                                    "管理员"
                                    :
                                    this.defaultData.roleType=="user"?
                                        "用户"
                                        :
                                        null
                            }
                        </Option>
                    </Select>
                </Form.Item>
                {/*已經註銷*/}
                {/*<Form.Item*/}
                {/*    // name={"roleSequence"}*/}
                {/*    label={"角色顺序"}*/}
                {/*    // rules={[*/}
                {/*    //     {*/}
                {/*    //         type: 'number',*/}
                {/*    //         required: true*/}
                {/*    //     }*/}
                {/*    // ]}*/}
                {/*>*/}
                {/*    <InputNumber min={1} max={100} defaultValue={this.defaultData.roleSequence} onChange={value =>{this.defaultData.roleSequence=value}}/>*/}
                {/*</Form.Item>*/}

                <Form.Item
                    name={"roleDesc"}
                    label={"角色描述"}
                >
                    <Input defaultValue={this.defaultData.roleDesc}/>
                </Form.Item>
                <Form.Item
                    name={"rolePermission"}
                    label={"角色权限"}
                >
                    <Authority userType={this.defaultData.roleType} defaultData={this.defaultData.rolePermission} onChange={this.getPermissions}/>
                </Form.Item>

                <Form.Item
                    label="提交修改"
                    name="commit"
                >
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                    <Button htmlType="reset" style={{marginLeft:"1rem"}}>
                        重置
                    </Button>
                </Form.Item>
            </Form>
        );
    }
}


// export default function UpdateRoleForm(){
//
//     const [number, setNumber] = useState({
//         value: 11,
//     });
//
//     let permissions = [];
//
//     let defaultData = [];
//
//     let formRef = React.createRef();
//
//     const onGenderChange = (value) => {
//         formRef.current.setFieldsValue({
//             note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
//         });
//     };
//     const onFinish = (values) => {
//         if(values.rolePermission==undefined || values.rolePermission.length==0){
//             alert("未授权限")
//         }else {
//             console.log(values);
//             API.insertRole(values)
//         }
//     };
//     const onReset = () => {
//         formRef.current.resetFields();
//     };
//
//     const getPermissions=(permissions)=>{
//         permissions = permissions;
//     }
//
//     defaultData = API.getRoleContent();
//     console.log("this.defaultData",defaultData)
//
//     return (
//         <Form {...layout} ref={formRef} name="control-ref" onFinish={onFinish}>
//             <Form.Item
//                 name="roleName"
//                 label="角色名称"
//                 // rules={[
//                 //     {
//                 //         required: true,
//                 //     },
//                 // ]}
//             >
//                 <Input defaultValue={defaultData.roleName}/>
//             </Form.Item>
//             <Form.Item
//                 name="roleType"
//                 label="角色类型"
//                 // rules={[
//                 //     {
//                 //         required: true,
//                 //     },
//                 // ]}
//             >
//                 <Select
//                     // placeholder="Select a option and change input text above"
//                     onChange={onGenderChange}
//                     allowClear
//                     defaultValue={defaultData.roleType}
//                 >
//                     <Option value="admin">管理员</Option>
//                     <Option value="user">用户</Option>
//                 </Select>
//             </Form.Item>
//             <Form.Item
//                 label="角色顺序"
//             >
//                 <InputNumber min={1} max={100} defaultValue={number.value} onChange={value=>{console.log("value:",value)}}/>
//             </Form.Item>
//
//             <Form.Item
//                 name={"roleDesc"}
//                 label={"角色描述"}
//             >
//                 <Input defaultValue={defaultData.roleDesc}/>
//             </Form.Item>
//             <Form.Item
//                 name={"rolePermission"}
//                 label={"角色权限"}
//             >
//                 <Authority defaultData={defaultData.rolePermission} onChange={getPermissions}/>
//             </Form.Item>
//
//             <Form.Item {...tailLayout}>
//                 <Button type="primary" htmlType="submit">
//                     Submit
//                 </Button>
//                 <Button htmlType="button" onClick={onReset}>
//                     Reset
//                 </Button>
//             </Form.Item>
//         </Form>
//     );
// }
